<template>
  <div class="box" style="position: relative;padding-bottom: 210px;">

    <heads></heads>
    <tools></tools>
    <div class="tit1">
      <div class="list">
        <div class="li" style="cursor: pointer;" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
          <!-- <span>帮帮同城</span> -->
        </div>
        <!-- <div :style="olds==3?'color:#64B6A8;':''" @click="titleClick()">全部</div> -->
        <div :style="cuts == 2 ? 'color:#64B6A8;' : ''" @click="cutClick(2)">
          房源
        </div>
        <div :style="cuts == 1 ? 'color:#64B6A8;' : ''" @click="cutClick(1)">
          在售楼盘
        </div>
        <div :style="cuts == 0 ? 'color:#64B6A8;' : ''" @click="cutClick(0)">
          中介
        </div>
        <div class="sousuo">
          <input type="text" v-model="searchtext" placeholder="请输入关键字查找" @keyup.enter="search" />
          <p class="el-icon-search" @click="search"></p>
        </div>
        <!-- <div class="but">下载帮帮同城app</div> -->
      </div>
    </div>
    <div class="saixuan">
      <template v-if="saixuanstate">
        <div v-if="cuts == 2" class="li">
          <p class="p1">房源类别</p>
          <div class="list">
            <div :style="olds == 2 ? 'color:#64B6A8;' : ''" @click="titleClick(2, 2)">
              二手房
            </div>
            <div :style="olds == 1 ? 'color:#64B6A8;' : ''" @click="titleClick(2, 1)">
              新房
            </div>
            <div :style="olds == 0 ? 'color:#64B6A8;' : ''" @click="titleClick(1, 0)">
              租房
            </div>
          </div>
        </div>
        <div class="li" v-if="cuts == 2">
          <p class="p1">类别</p>
          <p class="p2" @click="leibieClick(-1)" :class="leibieIndex == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list">
            <div v-for="(item, index) in type1" :key="index" @click="leibieClick(item)"
              :class="leibieIndex == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
        <div class="li" v-if="cuts == 2">
          <p class="p1" v-if="olds != 0">售价</p>
          <p class="p1" v-else>租金</p>
          <p class="p2" @click="priceClick(-1)" :class="priceIndex == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list" v-if="olds != 0">
            <div v-for="(item, index) in type8" :key="index" @click="priceClick(item)"
              :class="priceIndex == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
          <div class="list" v-else>
            <div v-for="(item, index) in type12" :key="index" @click="priceClick(item)"
              :class="priceIndex == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
        <div class="li" v-if="cuts == 2">
          <p class="p1">面积</p>
          <p class="p2" @click="mianjiClick(-1)" :class="mianjiIndex == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list">
            <div v-for="(item, index) in type9" :key="index" @click="mianjiClick(item)"
              :class="mianjiIndex == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
        <div class="li" v-if="cuts == 1">
          <p class="p1">价格</p>
          <p class="p2" @click="housesClick(-1)" :class="housesIndex == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list">
            <div v-for="(item, index) in type20" :key="index" @click="housesClick(item)"
              :class="housesIndex == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
        <div class="li" v-if="cuts == 0">
          <p class="p1">区域</p>
          <p class="p2" @click="areaClick(-1)" :class="areaIndex == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list">
            <div v-for="(item, index) in type7" :key="index" @click="areaClick(item)"
              :class="areaIndex == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
        <div class="li" v-if="cuts == 2">
          <p class="p1">楼层</p>
          <p class="p2" @click="loucClick(-1)" :class="loucIndex == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list">
            <div v-for="(item, index) in type10" :key="index" @click="loucClick(item)"
              :class="loucIndex == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
      </template>

      <div class="yixuan" v-if="screenList.length > 0">
        <div class="na">已选条件：</div>
        <div class="li" v-for="(item, index) in screenList" :key="item.type + item.id">
          {{ item.value }}
          <img src="../../assets/cha.png" @click="clear(item)" />
        </div>
        <div class="qinchu" @click="clear(-1)">
          清除全部
        </div>
      </div>
      <div class="li">
        <p class="p1" v-if="saixuanstate"
          style="width: 620px;text-align: right;color: #333333;font-size: 18px;font-weight: 600;cursor: pointer;"
          @click="saixuanstate = false">
          ︿ 收起
        </p>
        <p class="p1" v-else
          style="width: 624px;text-align: right;color: #333333;font-size: 18px;font-weight: 600;cursor: pointer;"
          @click="saixuanstate = true">
          ﹀ 房源筛选
        </p>
      </div>
    </div>
    <div class="house-wrapper">
      <div class="housewrap">
        <div v-if="housestate" class="houseup" v-loading="loading" element-loading-text="拼命加载中"
          element-loading-background="rgba(255, 255, 255, 0.8)">
          <!-- 标题 -->
          <div style="
              display: flex;
              cursor: pointer;
              color: #333333;
              font-size: 18px;
              font-weight: 600;
              justify-content: space-between;
              align-items: center;
              padding: 19px 22px;

            " @click="housestate = false">
            <div style="display: flex; align-items: center">
              <p class="el-icon-arrow-up" style="font-size: 28px"></p>
              <div style="display: flex; margin-left: 12px">
                该区域内共有
                <p style="color: red">{{ housetotal }}</p>
                {{ houseTxt }}
              </div>
            </div>
            <div style="" @click.stop>
              <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link">
                  排序<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="i.id" :class="sortIndex == i.id ? 'sortActive' : ''"
                    v-for="(i, j) in sortArr" :key="j">{{ i.value }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <!-- 内容 -->
          <!-- <div style="overflow-y: scroll;"> -->
          <template v-if="cuts == 2">
            <virtual-list style="height: 560px; overflow-y: auto;" :data-key="'id'" :data-sources="houseList"
              :data-component="itemHouing">
            </virtual-list>
          </template>
          <template v-if="cuts == 1">
            <virtual-list style="height: 560px; overflow-y: auto;" :data-key="'id'" :data-sources="houseList"
              :data-component="itemHouses">
            </virtual-list>
          </template>
          <template v-if="cuts == 0">
            <virtual-list style="height: 560px; overflow-y: auto;" :data-key="'id'" :data-sources="houseList"
              :data-component="itemIntermediary">
            </virtual-list>
          </template>
          <el-empty v-if="housetotal == 0" description="该区域没有符合条件的房源"></el-empty>
          <!-- </div> -->
          <!-- <div class="fenye" v-if="cuts==2">
				<el-pagination background layout="prev, pager, next"
				:total="housetotal"
				:current-page="HousesPage.PageNo"
				@current-change="HousesCurrentChange"
					:page-size="HousesPage.pageSize"
				></el-pagination>
				</div>
				<div class="fenye" v-if="cuts==1">
				<el-pagination background layout="prev, pager, next"
				:total="housetotal"
				:current-page="premisesPage.PageNo"
				@current-change="premisesCurrentChange"
					:page-size="premisesPage.pageSize"
				></el-pagination>
				</div>
				<div class="fenye" v-if="cuts==0">
				<el-pagination background layout="prev, pager, next"
				:total="housetotal"
				:current-page="agencyPage.PageNo"
				@current-change="agencyCurrentChange"
					:page-size="agencyPage.pageSize"
				></el-pagination>
				</div> -->
        </div>
        <div v-else class="housedown">
          <div style="
              display: flex;
              cursor: pointer;
              color: #333333;
              font-size: 18px;
              font-weight: 600;
              align-items: center;
              padding: 19px 22px;
			  justify-content: space-between;
            " @click="housestate = true">
            <div style="display: flex;align-items: center;">
              <p class="el-icon-arrow-down" style="font-size: 28px"></p>
              <div style="display: flex; margin-left: 12px">
                该区域内共有
                <p style="color: red">{{ housetotal }}</p>
                {{ houseTxt }}
              </div>
            </div>
            <div style="" @click.stop>
              <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link">
                  排序<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="i.id" :class="sortIndex == i.id ? 'sortActive' : ''"
                    v-for="(i, j) in sortArr" :key="j">{{ i.value }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="containepic" :style="!saixuanstate
      ? 'width: 100%;height: 800px;'
      : 'width: 100%;height: 600px;'
      ">
      <img src="../../assets/dw.png" @click="initMap()"
        style="width: 50px;height: 50px;position: absolute;right: 100px;z-index: 99999999;bottom: 20px;cursor: pointer;" />
    </div>
    <!-- <div class="gotop" @click="toTop">
			<img src="../../assets/top.png" />返回顶部
		  </div> -->
    <floor></floor>
  </div>
</template>

<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import virtuallist from "vue-virtual-scroll-list";
// 优化页面数据渲染
import housing from "../../components/virtualRoll/housing.vue";
import houses from "../../components/virtualRoll/houses.vue";
import intermediary from "../../components/virtualRoll/intermediary.vue";
import tools from "@/components/tools";

import axios from "axios";
export default {
  components: {
    floor,
    heads,
    housing,
    houses,
    tools,
    intermediary,
    "virtual-list": virtuallist
  },
  data() {
    return {
      loading: false,
      gotop: false,
      housestate: false,
      saixuanstate: true,
      olds: 2,
      inputForm: {
        latitude: "",
        longitude: ""
      },
      markersArray: [],
      markersArrays: [],
      circleArray: [],
      type8: [],
      type9: [],
      type10: [],
      type12: [],
      type1: [],
      type20: [],
      type7: [],
      leibieIndex: -1,
      priceIndex: -1,
      loucIndex: -1,
      mianjiIndex: -1,
      housesIndex: -1,
      areaIndex: -1,
      HousesPage: {
        pageSize: 999,
        pageNo: 1,
        upStatus: 1,
        examineStatus: 2,
        orderSort: 1,
        latitude: "",
        longitude: "",
        transactionType: 2,
        newOld: 2
      },
      premisesPage: {
        pageNo: 1,
        pageSize: 999,
        auditStatus: 2,
        latitude: "",
        longitude: "",
        price: ""
      },
      agencyPage: {
        pageNo: 1,
        pageSize: 999,
        longitude: "",
        latitude: "",
        status: 1,
        shopType: 1,
        shopArea: ""
      },
      sortIndex: 1,
      sortArr: [
        {
          id: 1,
          value: "按默认排序"
        },
        {
          id: 2,
          value: "按总价从低到高"
        },
        {
          id: 3,
          value: "按总价从高到低"
        },
        {
          id: 4,
          value: "按面积从小到大"
        }
      ],
      lng: "",
      lat: "",
      housetotal: 0,
      searchtext: "",
      houseList: [],
      distance: 3680,
      keyword: "",
      cuts: 2,
      houseTxt: "套房源",
      itemHouing: housing,
      itemHouses: houses,
      itemIntermediary: intermediary,
      source: null,
      screenList: []
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  created() {
    this.initMap();
    this.getDictionaries();
  },
  methods: {
    checkFilterData(arr = [], id, type) {
      return arr.filter(item => item.ftype == type && item.id == id).length > 0;
    },
    clear(item, flag) {
      if (item != -1) {
        var type = item.ftype;
        if (type == "type") {
          //类别
          this.leibieClick(-1);
        } else if (type == "region") {
          //区域
          this.areaClick(-1);
        } else if (type == "pricee") {
          // 价格
          this.priceClick(-1);
        } else if (type == "area") {
          // 面积
          this.mianjiClick(-1);
        } else if (type == "floor") {
          // 楼层
          this.loucClick(-1);
        } else if (type == "transactionType") {
          this.titleClick(2, 2);
        } else if (type == "price") {
          this.housesClick(-1);
        }
        if (type == "shopArea") {
          //
          this.areaClick(-1);
        }
      } else {
        //
        if (this.cuts == 2) {
          this.leibieIndex = item;
          this.HousesPage.type = "";
          this.priceIndex = item;
          this.HousesPage.pricee = "";
          this.mianjiIndex = item;
          this.HousesPage.area = "";
          this.areaIndex = item;
          this.HousesPage.region = "";
          this.loucIndex = -1;
          this.HousesPage.floor = "";
          this.olds = 2;
          this.HousesPage.transactionType = 2;
          this.HousesPage.newOld = 2;
          this.HousesPage.pageNo = 1;
        } else if (this.cuts == 1) {
          this.housesIndex = item;
          delete this.premisesPage.price;
        } else if (this.cuts == 0) {
          this.areaIndex = item;
          delete this.agencyPage.shopArea;
        }

        if (!flag) {
          this.getHouseInfo();
        }
      }
    },
    handleCommand(command) {
      this.HousesPage.pageNo = 1;
      this.sortIndex = command;
      this.getHouseInfo();
    },
    dealOPe(newV) {
      var screenList = [];
      var checkArr = [];
      var labelKey = "";
      var obj = "";
      for (const key in newV) {
        if (Object.hasOwnProperty.call(newV, key)) {
          const element = newV[key];
          if (
            key == "type" ||
            key == "pricee" ||
            key == "price" ||
            key == "region" ||
            key == "area" ||
            key == "floor" ||
            key == "transactionType" ||
            key == "shopArea"
          ) {
            labelKey = "";
            obj = "";
            if (key == "type") {
              //类别
              checkArr = this.type1;
              labelKey = "valueNum";
            } else if (key == "region") {
              //区域
              checkArr = this.type7;
            } else if (key == "pricee") {
              // 价格
              checkArr = this.type8;
            } else if (key == "area") {
              // 面积
              checkArr = this.type9;
            } else if (key == "floor") {
              // 楼层
              labelKey = "valueNum";
              checkArr = this.type10;
            } else if (key == "transactionType") {
              //
              var value;
              if (element == 1) {
                value = "租房";
              } else if (element == 2) {
                value = newV["newOld"] == 1 ? "新房" : " 二手房";
              }

              obj = [
                {
                  id: 100899,
                  value: value,
                  ftype: key
                }
              ];
            } else if (key == "price") {
              // 面积
              checkArr = this.type20;
              labelKey = "valueName";
            } else if (key == "shopArea") {
              //
              checkArr = this.type7;
            }
            labelKey = labelKey || "valueName";
            console.log(element, checkArr);
            obj =
              obj ||
              checkArr
                .filter(item => item[labelKey] == element)
                .map(item => {
                  return {
                    ...JSON.parse(JSON.stringify(item)),
                    value: item.valueName,
                    ftype: key
                  };
                });
            if (!this.checkFilterData(this.screenList, obj.id, key)) {
              console.log("进来了进来了");
              screenList.push(...obj);
              console.log(screenList);
            }
          }
        }
      }
      this.screenList = screenList;
    },
    cancelRequest() {
      if (typeof this.source === "function") {
        this.source();
      }
    },
    cutClick(cut) {
      this.screenList = [];
      switch (cut) {
        //中介
        case 0:
          this.cuts = cut;
          this.agencyPage.pageNo = 1;
          this.houseTxt = "个中介";
          break;
        //在售楼盘
        case 1:
          this.cuts = cut;
          this.premisesPage.pageNo = 1;
          this.houseTxt = "套楼盘";
          break;
        //房源
        case 2:
          this.cuts = cut;
          this.HousesPage.pageNo = 1;
          this.houseTxt = "套房源";

          break;
      }
      this.sortIndex = 1;
      this.HousesPage.keyword = "";
      this.searchtext = "";
      this.getHouseInfo();
    },
    initMap() {
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        output: "jsonp"
      };
      this.$jsonp("https://apis.map.qq.com/ws/location/v1/ip", data).then(
        data => {
          let lat = data.result.location.lat;
          let lng = data.result.location.lng;
          // 经度
          this.lng = data.result.location.lng;
          // 维度
          this.lat = data.result.location.lat;
          // this.HousesPage.latitude = data.result.location.lat
          // this.HousesPage.longitude = data.result.location.lng
          // this.HousesPage.distance = 6000
          var that = this;
          var center = new qq.maps.LatLng(
            data.result.location.lat,
            data.result.location.lng
          );
          var map = new qq.maps.Map(document.getElementById("containepic"), {
            center: center,
            zoom: 13,
            disableDefaultUI: true
          });
          this.map = map;
          lat = map.getCenter().lat;
          lng = map.getCenter().lng;
          var anchor = new qq.maps.Point(250, 250),
            size = new qq.maps.Size(500, 500),
            scaleSize = new qq.maps.Size(500, 500),
            origin = new qq.maps.Point(0, 0),
            icon = new qq.maps.MarkerImage(
              "https://pic.bangbangtongcheng.com/61d928e58d47472891609adfc954148f.png",
              size,
              origin,
              anchor,
              scaleSize
            );
          var marker = new qq.maps.Marker({
            icon: icon,
            position: center,
            map: map
          });
          that.markersArray.push(marker);
          // var circle=new qq.maps.Circle({
          // 		map:map,
          // 		center:center,
          // 		radius:6000,
          // 		showBorder: true,
          // 		strokeWeight:2
          // });
          // var marker = new qq.maps.Marker({
          // 	position: center,
          // 	map: map,
          // });
          // that.markersArray.push(marker);
          // that.circleArray.push(circle)
          // var infoWin = new qq.maps.InfoWindow({
          // 	map: map,
          // });
          this.getHouseInfo();
          qq.maps.event.addListener(map, "dragend", function () {
            that.houseList = [];
            that.deleteOverlays();
            lat = map.getCenter().lat;
            lng = map.getCenter().lng;
            that.lat = lat;
            that.lng = lng;
            let center = new qq.maps.LatLng(lat, lng);
            marker = new qq.maps.Marker({
              icon: icon,
              position: center,
              map: map
            });
            // console.log(that.lat, that.lng);
            that.markersArray.push(marker);
            that.getHouseInfo();
          });
          qq.maps.event.addListener(map, "zoom_changed", function () {
            that.houseList = [];
            that.deleteOverlays();
            let center = new qq.maps.LatLng(that.lat, that.lng);
            marker = new qq.maps.Marker({
              icon: icon,
              position: center,
              map: map
            });
            // console.log(that.lat, that.lng);
            that.markersArray.push(marker);
            var zoomLevel = map.getZoom();
            that.calculateDis(zoomLevel);
            console.log(zoomLevel);
            that.getHouseInfo();
          });
          // qq.maps.event.addListener(map, "click", function(event) {
          // 	that.deleteOverlays();
          // 	this.latitude = event.latLng.getLat();
          // 	this.longiistude = event.latLng.getLng();
          // 	that.HousesPage.latitude = event.latLng.getLat();
          // 	that.HousesPage.longitude = event.latLng.getLng()
          // 	that.inputForm.longitude = this.longiistude;
          // 	that.inputForm.latitude = this.latitude;
          // 	var position = new qq.maps.LatLng(that.inputForm.latitude, that.inputForm.longitude);
          // 	var marker = new qq.maps.Marker({
          // 		map: map,
          // 		position: position
          // 	});
          // 	var circle=new qq.maps.Circle({
          // 			map:map,
          // 			center:position,
          // 			radius:6000,
          // 			showBorder: true,
          // 			strokeWeight:2
          // 	});
          // 	that.markersArray.push(marker);
          // 	that.circleArray.push(circle);
          // 	//that.init(event.latLng.getLat()+','+event.latLng.getLng())
          // 	that.getHouseInfo()
          // });
        }
      );
    },
    calculateDis(num) {
      //根据地图比例计算收缩范围
      if (num == 3) {
        this.distance = 3680 * 1000;
      }
      if (num == 4) {
        this.distance = 3680 * 500;
      }
      if (num == 5) {
        this.distance = 3680 * 250;
      }
      if (num == 6) {
        this.distance = 3680 * 100;
      }
      if (num == 7) {
        this.distance = 3680 * 50;
      }
      if (num == 8) {
        this.distance = 3680 * 25;
      }
      if (num == 9) {
        this.distance = 3680 * 10;
      }
      if (num == 10) {
        this.distance = 3680 * 5;
      }
      if (num == 11) {
        this.distance = 3680 * 2.5;
      }
      if (num == 12) {
        this.distance = 3680 * 1.8;
      }
      if (num == 13) {
        this.distance = 3680 * 1;
      }
      if (num == 14) {
        this.distance = 3680 * 0.5;
      }
      if (num == 15) {
        this.distance = 3680 * 0.25;
      }
      if (num == 16) {
        this.distance = 3680 * 0.1;
      }
      if (num == 17) {
        this.distance = 3680 * 0.05;
      }
      if (num == 18) {
        this.distance = 3680 * 0.025;
      }
      if (num == 19) {
        this.distance = 3680 * 0.001;
      }
      if (num == 20) {
        this.distance = 3680 * 0.0005;
      }
    },
    deleteOverlays() {
      if (this.markersArray) {
        for (var i in this.markersArray) {
          console.log(this.markersArray[i]);
          this.markersArray[i].setMap(null);
        }
        // this.markersArray.length = 0;
        this.markersArray = [];
      }
      if (this.markersArrays) {
        console.log(this.markersArrays.length, "清除数据的长度");
        for (var i in this.markersArrays) {
          console.log(this.markersArrays[i].position.lat, "清除的经纬度");
          this.markersArrays[i].setMap(null);
        }
        // this.markersArrays.length = 0;
        this.markersArrays = [];
      }
      // if (this.circleArray) {
      // 	for (var i in this.circleArray) {
      // 		this.circleArray[i].setMap(null);
      // 	}
      // this.circleArray.length = 0;
      // }
      // console.log(this.markersArrays,'清除');
    },
    getDictionaries() {
      this.$getHttp("/mob/home/getDictionaries", {
        type: "8,9,10,12,1,20,7"
      }).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            if (e.type == 8) this.type8.push(e);
            if (e.type == 9) this.type9.push(e);
            if (e.type == 10) this.type10.push(e);
            if (e.type == 12) this.type12.push(e);
            if (e.type == 1) this.type1.push(e);
            if (e.type == 20) this.type20.push(e);
            if (e.type == 7) this.type7.push(e);
          });
          console.log(this.type12);
        }
      });
    },
    getHouseInfo() {
      this.loading = true;
      this.HousesPage.distance = this.distance;
      this.HousesPage.latitude = this.lat;
      this.HousesPage.longitude = this.lng;
      this.premisesPage.distance = this.distance;
      this.premisesPage.latitude = this.lat;
      this.premisesPage.longitude = this.lng;
      this.agencyPage.distance = this.distance;
      this.agencyPage.latitude = this.lat;
      this.agencyPage.longitude = this.lng;
      // if (this.markersArrays) {
      // 	console.log(this.markersArrays.length,'清除数据的长度');
      // 	for (var i in this.markersArrays) {
      // 		console.log(this.markersArrays[i].position.lat,'清除的经纬度');
      // 		this.markersArrays[i].setMap(null);
      // 	}
      // 	// this.markersArrays.length = 0;
      // 	 this.markersArrays=[]
      // }
      let url = "";
      let obj = {};
      if (this.cuts == 2) {
        url = "/mob/home/getHouseByMap";
        obj = this.HousesPage;
        this.dealOPe(JSON.parse(JSON.stringify(this.HousesPage)));
      } else if (this.cuts == 1) {
        url = "/mob/user/getBuildingsInfo";
        obj = this.premisesPage;
        this.dealOPe(JSON.parse(JSON.stringify(this.premisesPage)));
      } else if (this.cuts == 0) {
        url = "/mob/user/getShopInfo";
        obj = this.agencyPage;
        this.dealOPe(JSON.parse(JSON.stringify(this.agencyPage)));
      }
      this.cancelRequest();
      // 取消上一次请求
      obj.orderSort = this.sortIndex < 0 ? 1 : this.sortIndex;
      axios({
        method: "get",
        url: this.$baseURL + url,
        params: obj,
        cancelToken: new axios.CancelToken(c => {
          this.source = c;
        })
      }).then(data => {
        data = data.data;
        if (data.code == 200) {
          if (
            (this.cuts == 2 && url != "/mob/home/getHouseByMap") ||
            (this.cuts == 1 && url != "/mob/user/getBuildingsInfo") ||
            (this.cuts == 0 && url != "/mob/user/getShopInfo")
          ) {
            return;
          }
          if (this.markersArrays) {
            console.log(this.markersArrays.length, "清除数据的长度");
            for (var i in this.markersArrays) {
              console.log(this.markersArrays[i].position.lat, "清除的经纬度");
              this.markersArrays[i].setMap(null);
            }
            // this.markersArrays.length = 0;
            this.markersArrays = [];
          }

          setTimeout(() => {
            this.loading = false;
          }, 100);
          console.log(
            data.page.list,
            "112231221122312211223122112231221122312211223122"
          );
          data.page.list.forEach(e => {
            if (e.hasOwnProperty("floor")) {
              if (e.floor.indexOf("|") == -1) {
                e.floor = "";
              } else {
                e.floor =
                  e.floor.split("|")[0] +
                  "层/" +
                  "共" +
                  e.floor.split("|")[1] +
                  "层";
              }
            }
          });
          this.houseList = data.page.list;
          this.housetotal = data.page.count;
          // console.log(data)
          this.markersArrays = [];
          let houseNumber = data.page.list.length;
          let toHouse = Number(String(houseNumber).substring(0, 1)) + 1;
          data.page.list.forEach((e, i) => {
            if (data.page.list.length > 100) {
              if (i % toHouse == 0) {
                var center = new qq.maps.LatLng(e.latitude, e.longitude);
                var anchor = new qq.maps.Point(15, 15),
                  size = new qq.maps.Size(30, 30),
                  scaleSize = new qq.maps.Size(30, 30),
                  origin = new qq.maps.Point(0, 0),
                  icon = new qq.maps.MarkerImage(
                    "https://pic.bangbangtongcheng.com/locationpic.png",
                    size,
                    origin,
                    anchor,
                    scaleSize
                  );
                var marker = new qq.maps.Marker({
                  icon: icon,
                  position: center,
                  map: this.map
                });
                this.markersArrays.push(marker);
              }
            } else {
              var center = new qq.maps.LatLng(e.latitude, e.longitude);
              var anchor = new qq.maps.Point(15, 15),
                size = new qq.maps.Size(30, 30),
                scaleSize = new qq.maps.Size(30, 30),
                origin = new qq.maps.Point(0, 0),
                icon = new qq.maps.MarkerImage(
                  "https://pic.bangbangtongcheng.com/locationpic.png",
                  size,
                  origin,
                  anchor,
                  scaleSize
                );
              var marker = new qq.maps.Marker({
                icon: icon,
                position: center,
                map: this.map
              });
              this.markersArrays.push(marker);
            }
          });
          console.log(this.markersArrays);
          console.log(this.markersArrays.length, "查询的数据长度");
          // if (data.page.list.length == 0){
          // 	this.markersArrays.setMap(null)
          // }
        }
      });
    },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    search() {
      if (this.cuts == 2) {
        this.HousesPage.keyword = this.searchtext;
      } else if (this.cuts == 1) {
        this.premisesPage.keyword = this.searchtext;
      } else if (this.cuts == 0) {
        this.agencyPage.keyword = this.searchtext;
      }
      this.getHouseInfo();
      // if (this.searchtext.trim() != ''){
      // 	const routeLink = this.$router.resolve({
      // 				path: '/index/houseSearch?search='+this.searchtext
      // 			})
      // 		window.open(routeLink.href, '_blank')
      // }
      // this.$router.push({
      //   path: "/index/houseSearch",
      //   query: {
      //     search: this.searchtext,
      //   },
      // });
    },
    housedetails(item) {
      if (this.cuts == 2) {
        // console.log(item,'item');
        // return
        if (item.transactionType == 1) {
          const routeLink = this.$router.resolve({
            path: "/index/leaseDetails?id=" + item.id
          });
          // console.log(routeLink.href);

          window.open(routeLink.href, "_blank");
          // this.$router.push({
          //   path: "/index/leaseDetails",
          //   query: {
          //     id: item.id
          //   }
          // });
        } else {
          const routeLink = this.$router.resolve({
            path: "/index/newHouseDetails?id=" + item.id
          });
          window.open(routeLink.href, "_blank");
          // this.$router.push({
          //   path: "/index/newHouseDetails",
          //   query: {
          //     id: item.id
          //   }
          // });
        }
      } else if (this.cuts == 1) {
        const routeLink = this.$router.resolve({
          path: "/index/storeyDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
      } else if (this.cuts == 0) {
        const routeLink = this.$router.resolve({
          path: "/index/ShopDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
      }
    },
    toAgent(id) {
      const routeLink = this.$router.resolve({
        path: "/index/goldConsultant?id=" + id
      });
      window.open(routeLink.href, "_blank");
      // this.$router.push({
      //   path: "/index/agentDetails",
      //   query: {
      //     id: id
      //   }
      // });
    },
    shopdetails(item) {
      if (item.hasOwnProperty("shopId") && item.shopId != "") {
        const routeLink = this.$router.resolve({
          path: "/index/ShopDetails?id=" + item.shopId
        });
        window.open(routeLink.href, "_blank");
        // this.$router.push({
        //   path: "/index/ShopDetails",
        //   query: {
        //     id: item.shopId
        //   }
        // });
      } else {
        this.$message({
          message: "个人房源！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }

      // if(item.shop_name == '个人房源'){
      // 	this.$message({
      // 	  message: "个人房源！",
      // 	  type: "error",
      // 	  offset: 120,
      // 	  duration: 2000,
      // 	});
      // }else{
      // 	this.$router.push({
      // 	  path: "/index/ShopDetails",
      // 	  query: {
      // 	    id: item.shop_id
      // 	  }
      // 	});
      // }
    },
    titleClick(type, newold) {
      this.leibieClick(-1)
      this.priceClick(-1)
      this.mianjiClick(-1)
      this.loucClick(-1)
      switch (newold) {
        //租房
        case 0:
          this.olds = newold;
          this.HousesPage.transactionType = 1;
          delete this.HousesPage.newOld;
          break;
        //新房
        case 1:
          this.olds = newold;
          this.HousesPage.transactionType = 2;
          this.HousesPage.newOld = 1;
          break;
        //二手房
        case 2:
          this.olds = newold;
          this.HousesPage.transactionType = 2;
          this.HousesPage.newOld = 2;
          break;
        case 3:
          // this.olds = newold
          // this.HousesPage.transactionType = 2
          // this.HousesPage.newOld = 2
          break;
      }
      this.HousesPage.pageNo = 1;
      this.getHouseInfo();
    },
    leibieClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.leibieIndex = item.valueNum;
        this.HousesPage.type = item.valueNum;
        this.getHouseInfo();
        return;
      }
      this.leibieIndex = item;
      delete this.HousesPage.type;
      this.getHouseInfo();
    },
    priceClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.priceIndex = item.valueNum;
        this.HousesPage.pricee = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.priceIndex = item;
      delete this.HousesPage.pricee;
      this.getHouseInfo();
    },
    mianjiClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.mianjiIndex = item.valueNum;
        this.HousesPage.area = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.mianjiIndex = item;
      delete this.HousesPage.area;
      this.getHouseInfo();
    },
    housesClick(item) {
      this.premisesPage.pageNo = 1;
      if (item != -1) {
        this.housesIndex = item.valueNum;
        this.premisesPage.price = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.housesIndex = item;
      delete this.premisesPage.price;
      this.getHouseInfo();
    },
    areaClick(item) {
      this.agencyPage.pageNo = 1;
      if (item != -1) {
        this.areaIndex = item.valueNum;
        this.agencyPage.shopArea = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.areaIndex = item;
      delete this.agencyPage.shopArea;
      this.getHouseInfo();
    },
    loucClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.loucIndex = item.valueNum;
        this.HousesPage.floor = item.remarks;

        this.getHouseInfo();
        return;
      }
      this.loucIndex = item;
      delete this.HousesPage.floor;
      this.getHouseInfo();
    },
    HousesCurrentChange(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.HousesPage.pageNo = e;
      this.houseList = [];
      this.getHouseInfo();
    },
    premisesCurrentChange(e) {
      this.premisesPage.pageNo = e;
      this.houseList = [];
      this.getHouseInfo();
    },
    agencyCurrentChange(e) {
      this.agencyPage.pageNo = e;
      this.houseList = [];
      this.getHouseInfo();
    }
  }
};
</script>

<style lang="less" scoped>
.house-wrapper {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.housewrap {
  position: absolute;
  top: -470px;
  left: calc((100vw - 1200px) / 2 * (-1));
  width: calc((100vw - 1200px) / 2 + 448px);
}


/deep/.el-dropdown {
  font-size: 18px;
}

.sortActive {
  color: rgb(100, 182, 168) !important;
}
.housedown {
  width: 572px;
  height: 60px;
  position: absolute;
  z-index: 8;
  top: 468px;
  // left: 348px;
  right: 100px;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.houseup {
  width: 572px;
  height: 465px;
  position: absolute;
  z-index: 99;
  top: 469px;
  // left: 348px;
  right: 100px;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
				height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.saixuan {
  color: #333;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 0;
  margin-top: 40px;
  padding-bottom: 20px;

  .li {
    .p1 {
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      margin-right: 32px;
      vertical-align: top;
    }

    .p2 {
      display: inline-block;
      font-size: 16px;
      margin-right: 32px;
      vertical-align: top;
      cursor: pointer;
    }

    div {
      display: inline-block;
      font-size: 16px;
      margin-right: 30px;
      vertical-align: top;
      margin-bottom: 10px;
    }

    .list {
      width: 1040px;

      div {
        cursor: pointer;
      }
    }

    .xuan {
      color: #64b6a8;
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;

  //margin: 60px 0px;
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.gotop {
  position: fixed;
  width: 85px;
  height: 33px;
  line-height: 34px;
  box-sizing: border-box;
  padding-left: 30px;
  right: 15px;
  bottom: 77px;
  background-color: #fff;
  border-radius: 17px;
  font-size: 12px;
  box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.16);
  color: #000;
  z-index: 9999999;

  img {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 23px;
    height: 23px;
  }
}

.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  min-height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;

  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;

    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }

  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }

  .qinchu,
  .li,
  .na {
    margin-bottom: 12px;
  }
}
</style>
